<template>
    <div>
        <Top />
        <TodoHeader :addtodo="addtodo"/>
        <TodoMain 
          :todolist="todolist" 
          :deltodo="deltodo"
          :checkedTodo="checkedTodo"
        />
        <TodoFooter 
          v-show="todolist.length"
          :clearAllDoned="clearAllDoned"
          :todolist="todolist" 
          :checkedAllTodo="checkedAllTodo"
        />
    </div>
</template>

<script>
    import TodoHeader from '@/components/TodoList3/TodoHeader.vue'
    import TodoMain from '@/components/TodoList3/TodoMain.vue'
    import TodoFooter from '@/components/TodoList3/TodoFooter.vue'
    import {nanoid} from "nanoid"
    
    export default {
        name: "TodoList3",
        components: {
            TodoFooter,
            TodoHeader,
            TodoMain
        },
        data(){
          return {
            todolist: JSON.parse(localStorage.getItem("todolist")) || []
          }
        },
        watch:{
          todolist:{
            deep: true,
            handler(){
              localStorage.setItem("todolist",JSON.stringify(this.todolist))
            }
          }
        },
        methods:{
          // 添加
          addtodo(title){
            let bol = this.todolist.some(item=>item.title === title)
            if (!bol) {
              let newtodo = {
                id:nanoid(),
                title,
                done:false,
              }
              this.todolist.unshift(newtodo)
              // localStorage.setItem("todolist",JSON.stringify(this.todolist))
              return true
            }else{
              return false
            }
          },
          // 删除一个todo
          deltodo(id){
            if (window.confirm("确定删除吗？")) {
              this.todolist = this.todolist.filter(item => item.id !== id)
            }           
          },
          // 更新某个todo的完成
          checkedTodo(id,done){
            this.todolist.forEach(item=>{
              if (item.id === id) {
                item.done = done
              }
            })
          },
          // 清除已完成
          clearAllDoned(){
            this.todolist = this.todolist.filter(item => !item.done)
          },
          // 全选或取消全选
          checkedAllTodo(done){
            this.todolist.forEach(item => item.done = done)
          }
        }
    }
</script>

<style>
body {
  background: #fff;
  width: 600px;
  margin: 0 auto;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #da4f49;
}

.btn-danger:hover {
  color: #fff;
  background-color: #da4f49;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>